<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				客户分类
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="分类名称" prop="name" align="center" />
				<el-table-column label="比例" prop="询价单" align="center"  />
				<el-table-column label="操作" fixed="right" align="center" >
					<template #default="{ row }">
						<el-button type="primary" link @click="Show=true">
							<span class="main-color1">编辑</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<div class="main-color mt-[20px]">说明：所有产品的基准价格是以大型最终用户的价格为基准</div>
		<!-- 编辑 -->
		<el-dialog v-model="Show" title="编辑" width="20%">
		   <div>
			  <div class="main-color v-flex v-col-top">
			  	<span>分类名称：</span>
			  	<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
			  </div>
			  <div class="main-color v-flex v-col-top mt-[20px]">
			  	<span class="v-wordBreak w-[83px]">客户产品价格展示比例：</span>
				<div class="flex-1 ml-[1px]">
					<el-input  placeholder="请输入"></el-input>
					<div class="main-color mt-[20px]">说明：该类型客户查看产品的价格比例</div>
				</div>
			  </div>
			  <div class="text-center mt-[30px] pb-[20px]">
			  	<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">保存</el-button>
			  </div>
		   </div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	const lists = ref<Array<any>>([
		{name:'小型最终用户'}, {name:'大型最终用户'}, {name:'专业分销商'},{name:'杂牌分销商'},{name:'最终用户兼分销商'},{name:'主机厂'},{name:'其他类'}
	])
	const Show = ref(false)
</script>

<style>
</style>